<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

    <!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />


    <title>中新生态城24小时空气质量趋势</title>

    <script src="https://vuejs.org/js/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.5/echarts.min.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=bXD2LO0j2HgnWVZMXx2g5FeExhoV8HVD"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.1.2/js/jquery-weui.min.js"></script>
    

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

</head>
<body ontouchstart>
	<div class="container">
        <div class="row">
        <div id="airQuality" class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
            <ul id="myTabs" class="nav nav-tabs" role="tablist">
                <li id="li_ci" role="presentation" class="active">
                    <a href="#ci" id="tab_ci" role="tab" data-toggle="tab" aria-controls="ci" aria-expanded="true">综指</a>
                </li>
                <li id="li_aqi" role="presentation">
                    <a href="#aqi" id="tab_aqi" role="tab" data-toggle="tab" aria-controls="aqi" aria-expanded="true">AQI</a>
                </li>
                <li id="li_pm25" role="presentation">
                    <a href="#pm25" id="tab_pm25" role="tab" data-toggle="tab" aria-controls="pm25" aria-expanded="true">PM2.5</a>
                </li>
                <li id="li_pm10" role="presentation">
                    <a href="#pm10" id="tab_pm10" role="tab" data-toggle="tab" aria-controls="pm10" aria-expanded="true">PM10</a>
                </li>
                <li id="li_co" role="presentation">
                    <a href="#co" id="tab_co" role="tab" data-toggle="tab" aria-controls="co" aria-expanded="true">CO</a>
                </li>
                <li id="li_o3" role="presentation">
                    <a href="#o3" id="tab_o3" role="tab" data-toggle="tab" aria-controls="o3" aria-expanded="true">O3</a>
                </li>
                <li id="li_so2" role="presentation">
                    <a href="#so2" id="tab_so2" role="tab" data-toggle="tab" aria-controls="so2" aria-expanded="true">SO2</a>
                </li>
                <li id="li_no2" role="presentation">
                    <a href="#no2" id="tab_no2" role="tab" data-toggle="tab" aria-controls="no2" aria-expanded="true">NO2</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="trendChart" class="row"  style="height:600px;"></div>
	</div>
   
	<script type="text/javascript">
        // 初始化数据绑定
        

        // 初始化地图
		var trendChart = echarts.init(document.getElementById('trendChart'));
        option = {
            grid: {
                top:15,
                left:10,
                right:0,
                bottom:10,
                containLabel:true
            },
            xAxis: [
            {
                type: 'category',
                boundaryGap: 0,
                data: ['0时', '1时', '2时', '3时', '4时', '5时', '0时', '6时', '7时', '8时', '9时', '10时', '11时', '12时',
                 '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
                splitLine: {
                    show: true,
                    color:'#5588AA'
                },
            }],
            lengend:{
                left: 'center',
                data: [
                {
                    name: '中新生态城',
                    icon: 'emptyCircle'
                },
                {   name: '天津市',
                    icon: 'emptyRect'
                }],
                show: true
            },
            yAxis: [
            {
                interval: 50,
                show: false,
                min: 0,
                max: 300,
                position: 'right',
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                }
            }, 
            {
                type: 'category',
                position: 'left',
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,
                },
                splitArea: {
                    show: true,
                    areaStyle:{
                        color:['#00FF00','#FFFF00','#FF7F00','#FF0000','#8E236B','#B34D4D']
                    }
                },
                data: ['', '', '', '', '', ''],
            }],
            series : [
            {
                type: 'line',
                name: '中新生态城',
                symbol: 'emptyCircle',
                symbolSize: 10,
                lineStyle: {
                    normal: {
                        color: '#5588AA',
                        width: 2
                    },
                },
                data: [],
            },
            {
                type: 'line',
                name: '天津市',
                symbol: 'emptyRect',
                symbolSize: 10,
                lineStyle: {
                    normal: {
                        color: '#5588AA',
                        width: 2
                    },
                },
                data: [],
            }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        trendChart.setOption(option);

        // 读取空气质量数据
        // "http://dev2.airsensor.org/airapi/chart/";
        // axios.defaults.baseURL = '/api';
        var baseURL = "http://dev2.airsensor.org/airapi/chart/TianjingByStation/"
        function getTrendData(name) {

            $.ajax({
             type: "get",
             async: false,
             url: baseURL+name,
             dataType: "jsonp",
             jsonp: "callback",
             success: function(data){
// update trend date
                // d1=[20, 10, 30, 5, 9, 20, 20, 50, 20, 20, 20, 40, 20, 20, 20, 20, 20, 10, 20, 20, 20, 5, 20, 20];
                // d2=[5, 6, 2, 5, 9, 20, 2, 50, 20, 20, 20, 10, 20, 20, 20, 8, 20, 10, 20, 20, 20, 5, 20, 1];
                ecoCity = data.series[1].data;
                tj = data.series[0].data;
                category = data.category;
                // for(var i=0;i<response.date.airinfoStation.length;i++)
                // {
                //     d.push([response.date.airinfoStation[i].lng, response.date.airinfoStation[i].lat, response.date.airinfoStation[i].value]);
                // }
                updatedOption = {
                    xAxis: [
                    {
                        type: 'category',
                        data: category
                    }], 
                    series: [
                    {
                        name: '中新生态城',
                        type: 'line',
                        data: ecoCity
                    },
                    {
                        name: '天津市',
                        type: 'line',
                        data: tj
                    }]
                };
                
                trendChart.setOption(updatedOption);
             },
             error: function(){
                 $.toast("获取数据失败");
             }
         });

/*
            axios.get(baseURL+name).then(function (response) {
                // update trend date
                // d1=[20, 10, 30, 5, 9, 20, 20, 50, 20, 20, 20, 40, 20, 20, 20, 20, 20, 10, 20, 20, 20, 5, 20, 20];
                // d2=[5, 6, 2, 5, 9, 20, 2, 50, 20, 20, 20, 10, 20, 20, 20, 8, 20, 10, 20, 20, 20, 5, 20, 1];
                ecoCity = response.date.series[1].date;
                tj = response.date.series[0].date;
                category = response.date.category;
                // for(var i=0;i<response.date.airinfoStation.length;i++)
                // {
                //     d.push([response.date.airinfoStation[i].lng, response.date.airinfoStation[i].lat, response.date.airinfoStation[i].value]);
                // }
                updatedOption = {
                    xAxis: [
                    {
                        type: 'category',
                        date: category
                    }], 
                    series: [
                    {
                        name: '中新生态城',
                        type: 'line',
                        date: ecoCity
                    },
                    {
                        name: '天津市',
                        type: 'line',
                        date: tj
                    }]
                };
                
                trendChart.setOption(updatedOption);
            })
            .catch(function (error) {
                $.toast("获取数据失败");
            });*/
        };

        $('#myTabs a').click(function (e) {
            e.preventDefault();
            if(this.id=='tab_ci'){
                $('#li_ci').addClass('active')
                $('#li_aqi').removeClass('active')
                $('#li_pm25').removeClass('active')
                $('#li_pm10').removeClass('active')
                $('#li_co').removeClass('active')
                $('#li_o3').removeClass('active')
                $('#li_so2').removeClass('active')
                $('#li_no2').removeClass('active')
                getTrendData('COMPINDEX');
            }else if(this.id=="tab_aqi"){
                $('#li_ci').removeClass('active')
                $('#li_aqi').addClass('active')
                $('#li_pm25').removeClass('active')
                $('#li_pm10').removeClass('active')
                $('#li_co').removeClass('active')
                $('#li_o3').removeClass('active')
                $('#li_so2').removeClass('active')
                $('#li_no2').removeClass('active')
                getTrendData('AQI');
            }else if(this.id=="tab_pm25"){
                $('#li_ci').removeClass('active')
                $('#li_aqi').removeClass('active')
                $('#li_pm25').addClass('active')
                $('#li_pm10').removeClass('active')
                $('#li_co').removeClass('active')
                $('#li_o3').removeClass('active')
                $('#li_so2').removeClass('active')
                $('#li_no2').removeClass('active')
                getTrendData('PM25');
            }else if(this.id=="tab_pm10"){
                $('#li_ci').removeClass('active')
                $('#li_aqi').removeClass('active')
                $('#li_pm25').removeClass('active')
                $('#li_pm10').addClass('active')
                $('#li_co').removeClass('active')
                $('#li_o3').removeClass('active')
                $('#li_so2').removeClass('active')
                $('#li_no2').removeClass('active')
                getTrendData('PM10');
            }else if(this.id=="tab_co"){
                $('#li_ci').removeClass('active')
                $('#li_aqi').removeClass('active')
                $('#li_pm25').removeClass('active')
                $('#li_pm10').removeClass('active')
                $('#li_co').addClass('active')
                $('#li_o3').removeClass('active')
                $('#li_so2').removeClass('active')
                $('#li_no2').removeClass('active')
                getTrendData('CO');
            }else if(this.id=="tab_o3"){
                $('#li_ci').removeClass('active')
                $('#li_aqi').removeClass('active')
                $('#li_pm25').removeClass('active')
                $('#li_pm10').removeClass('active')
                $('#li_co').removeClass('active')
                $('#li_o3').addClass('active')
                $('#li_so2').removeClass('active')
                $('#li_no2').removeClass('active')
                getTrendData('O3');
            }else if(this.id=="tab_so2"){
                $('#li_ci').removeClass('active')
                $('#li_aqi').removeClass('active')
                $('#li_pm25').removeClass('active')
                $('#li_pm10').removeClass('active')
                $('#li_co').removeClass('active')
                $('#li_o3').removeClass('active')
                $('#li_so2').addClass('active')
                $('#li_no2').removeClass('active')
                getTrendData('SO2');
            }else if(this.id=="tab_no2"){
                $('#li_ci').removeClass('active')
                $('#li_aqi').removeClass('active')
                $('#li_pm25').removeClass('active')
                $('#li_pm10').removeClass('active')
                $('#li_co').removeClass('active')
                $('#li_o3').removeClass('active')
                $('#li_so2').removeClass('active')
                $('#li_no2').addClass('active')
                getTrendData('NO2');
            }
        });
        getTrendData('COMPINDEX');
    
	</script>
</body>

</html>